<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import Api from './api/index.js'
  const __Api = new Api()
  // import Tabbar from '@/components/TabbarCustom.vue'
  // import { useUsercodeStore } from '@/store/usercode.js'

  const htmlTxt = ref(null)
  function goBack() {
    uni.navigateBack()
  }
  onShow(() => {
    __Api.getDetails({ id: 10 }).then((res) => {
      htmlTxt.value = res.data.details
    })
    // hidePart()
    // uni.hideTabBar()
    // getUserInfo()
  })
</script>

<template>
  <view class="warp">
    <view class="war-top">
      <view class="war-back" @click="goBack">
        <view class="back-aim"> </view>
      </view>
    </view>
    <image
      class="bgImg"
      src="https://ojqn.wm2177.com/wechat_imgs/ball/bg-home.jpg"
      mode=""
    ></image>
    <view class="content" v-html="htmlTxt"> </view>
  </view>
</template>
<style lang="less" scoped>
  .content {
    padding: 0 38rpx;
    padding-top: 190rpx;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    top: 0;
    left: 0;
    z-index: 10000;
    box-sizing: border-box;
    color: #ffffff;
  }
  .warp {
    width: 100%;
    height: 100vh;
    .bgImg {
      width: 100%;
      height: 100%;
    }
    .war-top {
      padding-left: 18rpx;
      position: fixed;
      z-index: 99999;
      top: 88rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      .war-back {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 57rpx;
        height: 57rpx;
        background-color: rgba(7, 1, 53, 0.5);
        border-radius: 50%;

        .back-aim {
          width: 20rpx;
          height: 20rpx;
          border-top: 4rpx solid #fff;
          border-left: 4rpx solid #fff;
          transform: rotate(-45deg);
        }
      }
    }
  }
</style>
